<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  height: 100vh;
			  justify-content: center;
			  align-items: center;
			  background: #000;
			  overflow-y: hidden;
			}
			
			.scene {
			  width: 200px;
			  height: 200px;
			}
			.scene .scene__bg {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			  filter: blur(20px);
			}
			
			.cube {
			  --cube-width: 200px;
			  position: relative;
			  width: 100%;
			  height: 100%;
			  transform-style: preserve-3d;
			  transform: rotateX(70deg) rotateZ(60deg);
			}
			.cube .cube__face {
			  position: absolute;
			  width: var(--cube-width);
			  height: var(--cube-width);
			  background: rgba(255, 255, 255, 0.5);
			  border: 1px solid rgba(0, 0, 0, 0.1);
			}
			.cube .cube__face .cube__face__bg {
			  position: absolute;
			  top: 0;
			  bottom: 0;
			  width: 100%;
			  height: 100%;
			  object-fit: cover;
			}
			.cube .cube__face--front {
			  transform: rotateY(0deg) translateZ(calc(var(--cube-width) / 2));
			}
			.cube .cube__face--front .cube__face__bg {
			  transform: rotateZ(0.75turn);
			}
			.cube .cube__face--right {
			  transform: rotateY(90deg) translateZ(calc(var(--cube-width) / 2));
			}
			.cube .cube__face--right .cube__face__bg {
			  transform: rotateZ(-0.25turn);
			}
			.cube .cube__face--back {
			  transform: rotateY(180deg) translateZ(calc(var(--cube-width) / 2));
			}
			.cube .cube__face--left {
			  transform: rotateY(-90deg) translateZ(calc(var(--cube-width) / 2));
			}
			.cube .cube__face--top {
			  transform: rotateX(90deg) translateZ(calc(var(--cube-width) / 2));
			}
			.cube .cube__face--bottom {
			  transform: rotateX(-90deg) translateZ(calc(var(--cube-width) / 2));
			}
		</style>
	</head>
	<body>
		<div class="scene">
		  <img class="scene__bg" src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
		  <div class="cube">
		    <div class="cube__face cube__face--front">
		      <img class="cube__face__bg" src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
		    </div>
		    <div class="cube__face cube__face--back"></div>
		    <div class="cube__face cube__face--right">
		      <img class="cube__face__bg" src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
		    </div>
		    <div class="cube__face cube__face--left"></div>
		    <div class="cube__face cube__face--top"></div>
		    <div class="cube__face cube__face--bottom">
		      <img class="cube__face__bg" src="https://i.loli.net/2019/11/23/cnKl1Ykd5rZCVwm.jpg" />
		    </div>
		  </div>
		</div>

	</body>
</html>
